<template>
    <el-container class="book-container">
        <el-row>
            <el-col class="c1" :md="6" :lg="6" :sm="24">
                <div class="img-div1">
                  <el-image style="width: 100%;height: 100%;" :src="`${base_url+book.b_cover}`"  fit="cover" />
                </div>
            </el-col>
            <el-col class="c2" :md="18" :lg="18" :sm="24">
              <p><el-text>
                <h2>{{ book.b_name }}</h2>
              </el-text></p>
              <p><el-text>
                <h3>类别 · {{ book.c_name }}</h3>
              </el-text></p>
              <p> <el-text>
                {{ book.author }} · 著
              </el-text></p>
              <p> <el-text>
                出版社：{{ book.publisher }} 
              </el-text></p>
              <p> <el-text>
                出版日期：{{ book.pubdate }} 
              </el-text></p>
              <p> <el-text>
                库存数量：{{ book.book_num }} 
              </el-text></p>
              <p> <el-text>
                借阅次数：{{ book.borr_num }} 
              </el-text></p>
              <p> <el-text>
                ISBN：{{ book.isbn }} 
              </el-text></p>
              <p v-if="book.book_num >0"> <el-text>
                <el-button type="primary" @click="btn_borrow(book.book_id)">借阅图书</el-button>
              </el-text></p>
            </el-col>
        </el-row>
    </el-container>
    <el-container class="book-container" style="flex-direction: column;">
      <h4>图书简介</h4>
      <el-main style="margin-top: 20px;">
      <el-text v-html="book.book_desc"></el-text></el-main>
    </el-container>


    <el-dialog v-model="dialogFormVisible" :close-on-click-modal="false" title="借阅详细" width="500">
    <el-form :model="record">
      <el-form-item label="图书信息" :label-width="formLabelWidth">
        <strong><el-text>{{ book.b_name }}</el-text></strong>
      </el-form-item>
      <el-form-item label="结束时间" :label-width="formLabelWidth">
        <el-date-picker
        v-model="record.endTime"
        type="date"
        placeholder="结束时间"
        value-format="YYYY-MM-DD"
        style="width: 100%;"
        :disabled-date="disabledDate"
      />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="btn_borrow_ok">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import { ElMessage } from 'element-plus';
import http from '../axios'
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router';


const router = useRouter();

const props = defineProps(["bookId"]);

const book = ref({})
const dialogFormVisible= ref(false);
const base_url = ref(import.meta.env.VITE_BASE_APP_PATH)

const disabledDate = (time) => {
      return time.getTime() < Date.now(); // 禁用当前日期之前的日期
    };
const record= ref({});

onMounted(() => {
    get_one_book(props.bookId)
})

const get_one_book=(id)=>{
    http.get('/book/list',{params:{bookId:id}}).then(resp=>{
        book.value = resp.data.data.list[0];
    })
}
const btn_borrow = (id)=>{
  console.log(id);
  record.value.bookId = id;
  dialogFormVisible.value = true;
  
}

const btn_borrow_ok = ()=>{
  console.log(record.value);
  http.post('/record/add',record.value).then(resp=>{
    if (resp.data.code != '200') {
      ElMessage.error(resp.data.message);
    }
    ElMessage.success(resp.data.message);
    router.push("/index/profile/record");
  })
}

</script>

<style scoped>
.el-header1 {
  background-color: #333;
  color: #b0b0b0;
}
.book-container{

    padding: 16px;
    width: 70%;
    margin: 30px auto;
    box-shadow: 0 0 3px 1px #b0b0b0;
    box-sizing: border-box;
}
.el-row{
    width: 100%;
    height: 100%;
    
}
.img-div1{
  height: 380px;
  width: 80%;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
  
}
.c2>p{
  line-height: 40px;
}
</style>
